<template>
  <view class="wh_auto pc_tab_bar">
    <view v-for="(item, index) in tabBarList" :key="index" @click="changeTabBarFun(index)" class="pc_tab_bar_item">
      <image :src="currentImage(index)" />
    </view>
  </view>
</template>

<script setup lang="ts" name="PCTabBar">
  import { redirectTo, switchTab } from '@/utils/navigateTo'
  import { ref, computed, onMounted, PropType, watch } from 'vue'
  const pages = getCurrentPages()
  const props = defineProps({
    index: {
      type: Number as PropType<number>, // 明确类型为 string
      required: true,
      default: () => 0,
    },
  })
  const currentIndex = ref(props.index)
  const currentImage = computed(() => (index: number) => currentIndex.value == index ? tabBarList.value[index].selectedIconPath : tabBarList.value[index].iconPath)
  const tabBarList = ref([
    {
      text: '首页',
      iconPath: '/static/tabBar/home.png',
      selectedIconPath: '/static/tabBar/home_active.png',
      pagePath: '/pages/index/index',
    },
    {
      text: '店铺',
      iconPath: '/static/tabBar/my.png',
      selectedIconPath: '/static/tabBar/my_active.png',
      pagePath: '/pages/shop/shop',
    },
    {
      text: '我的',
      iconPath: '/static/tabBar/my.png',
      selectedIconPath: '/static/tabBar/my_active.png',
      pagePath: '/pages/userinfo/userinfo',
    },
  ])
  const changeTabBarFun = (index: number) => {
    const currentPage = pages[pages.length - 1]
    const currentPath = currentPage.route
    if ('/' + currentPath !== tabBarList.value[index].pagePath) {
      switchTab(tabBarList.value[index].pagePath)
    }
  }
</script>

<style scoped lang="scss">
  .pc_tab_bar {
    border: 1px solid #dadbde;
  }
  .pc_tab_bar_item {
    padding: 40rpx;
    image {
      width: 38rpx;
      height: 38rpx;
      object-fit: cover;
    }
  }
</style>
